<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>按钮 - view</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../dist/layui.css">
    <link rel="stylesheet" href="../src-new/style-button.css">
    <style>
        body {
            padding: 10px;
        }
    </style>
</head>
<body>

<fieldset style="margin-top: 30px;">
    <legend>按钮主题</legend>
    <div>
        <button type="button" class="btn btn-primary">原始按钮</button>
        <button type="button" class="btn">默认按钮</button>
        <button type="button" class="btn btn-dashed">折线按钮</button>
        <button type="button" class="btn btn-info">危险按钮</button>
        <button type="button" class="btn btn-success">危险按钮</button>
        <button type="button" class="btn btn-warning">危险按钮</button>
        <button type="button" class="btn btn-danger">危险按钮</button>
        <button type="button" class="btn btn-link">链接按钮</button>
    </div>
</fieldset>

<fieldset style="margin-top: 30px;">
    <legend>图标按钮</legend>
    <div>
        <button type="button" class="btn btn-primary btn-icon-only"><i class="icon-plus"></i></button>
        <button type="button" class="btn btn-icon-only"><i class="icon-plus"></i></button>
        <button type="button" class="btn btn-dashed btn-icon-only btn-circle"><i class="icon-plus"></i></button>
        <button type="button" class="btn btn-danger btn-icon-only"><i class="icon-plus"></i></button>
    </div>
</fieldset>

<fieldset style="margin-top: 30px;">
    <legend>圆角按钮</legend>
    <div>
        <button type="button" class="btn btn-primary btn-circle btn-icon-only"><i class="icon-plus"></i></button>
        <button type="button" class="btn btn-circle btn-icon-only"><i class="icon-plus"></i></button>
        <button type="button" class="btn btn-dashed btn-circle btn-icon-only"><i class="icon-plus"></i></button>
        <button type="button" class="btn btn-danger btn-circle btn-icon-only"><i class="icon-plus"></i></button>
    </div>
</fieldset>

<fieldset style="margin-top: 30px;">
    <legend>禁用按钮</legend>
    <div>
        <button type="button" disabled class="btn btn-primary">原始按钮</button>
        <button type="button" disabled class="btn">默认按钮</button>
        <button type="button" disabled class="btn btn-dashed">折线按钮</button>
        <button type="button" disabled class="btn btn-danger">危险按钮</button>

        <br/><br/>

        <button type="button" disabled class="btn btn-primary btn-circle btn-icon-only"><i class="icon-plus"></i></button>
        <button type="button" disabled class="btn btn-circle btn-icon-only"><i class="icon-plus"></i></button>
        <button type="button" disabled class="btn btn-dashed btn-circle btn-icon-only"><i class="icon-plus"></i></button>
        <button type="button" disabled class="btn btn-danger btn-circle btn-icon-only"><i class="icon-plus"></i></button>
    </div>
</fieldset>

<fieldset style="margin-top: 30px;">
    <legend>按钮尺寸</legend>
    <div>
        <button type="button" class="btn btn-primary btn-lg">Large</button>
        <button type="button" class="btn btn-primary">Default</button>
        <button type="button" class="btn btn-primary btn-sm">Small</button>
    </div>
</fieldset>

<fieldset style="margin-top: 30px;">
    <legend>加载按钮</legend>
    <div>
        <button type="button" class="btn btn-primary btn-loading"><i class="icon-refresh-cw icon-spin"></i> 原始按钮</button>
        <button type="button" class="btn btn-loading">默认按钮</button>
        <button type="button" class="btn btn-dashed btn-loading">折线按钮</button>
        <button type="button" class="btn btn-danger btn-loading">危险按钮</button>
        <button type="button" class="btn btn-link btn-loading">链接按钮</button>
    </div>
</fieldset>

<fieldset style="margin-top: 30px;">
    <legend>按钮尺寸</legend>
    <div>
        <div class="btn-group btn-group-lg">
            <button type="button" class="btn active"><i class="icon-plus"></i></button>
            <button type="button" class="btn"><i class="icon-plus"></i></button>
            <button type="button" class="btn"><i class="icon-plus"></i></button>
        </div>
        <div class="btn-group">
            <button type="button" class="btn active">默认按钮</button>
            <button type="button" class="btn">默认按钮</button>
            <button type="button" class="btn">默认按钮</button>
        </div>
        <div class="btn-group btn-group-sm">
            <button type="button" class="btn active">默认按钮</button>
            <button type="button" class="btn">默认按钮</button>
            <button type="button" class="btn">默认按钮</button>
        </div>
    </div>
</fieldset>


<script src="../src/layui.js"></script>
<script>
    layui.use(['jquery'], function($){
        var _btn = $('.btn').eq(1);
        _btn.on('click', function(){
            _btn.attr('ant-click-animating-without-extra-node', 'true');
        });
    });
</script>
</body>
</html>
